<template>
    <!-- 投保记录 -->
    <div>
        <el-row>
            <el-col :span="24" class="base-mian-cell" v-if="recordFlag">
                <div class="base-mian-cell-title clearfix">
                    <div class="left fl">
                        <span class="line">|</span>
                        <span class="tips">投保记录</span>
                    </div>
                    <div class="right fr" @click="changeView">
                        <i class="el-icon-circle-close"></i>
                    </div>
                </div>
                <div class="base-mian-cell-main">
                    <el-table :data="historys" style="width: 100%">
                        <el-table-column prop="chdrnum" label="保单号码" min-width="100" show-overflow-tooltip>
                             <template slot-scope="scope">
                                <div v-if="scope.row.show">{{scope.row.chdrnum}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="premCessTerm" label="缴费期" min-width="80" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="crtable" label="险种" min-width="100" >
                            <template slot-scope="scope">
                                <el-popover trigger="hover" placement="top">
                                    <p class="desctips"> {{ scope.row.desc }}</p>
                                    <div slot="reference" class="name-wrapper">
                                        {{scope.row.zpshortc}}
                                    </div>
                                </el-popover>
                            </template>
                        </el-table-column>
                        <el-table-column prop="sumins" label="保额" min-width="120" show-overflow-tooltip>
                            <template slot-scope="scope">
                                {{scope.row.sumins.toFixed(2)}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="mortcls" label="职级" min-width="60" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="fupcde" label="缴别" min-width="80" show-overflow-tooltip>
                            <template slot-scope="scope">
                            {{scope.row.fupcde | billfreqPige}}
                           </template>
                        </el-table-column>
                        <el-table-column prop="approval" label="保单核保决定" min-width="120" show-overflow-tooltip>
                            <template slot-scope="scope">
                                {{scope.row.approval | approvalPige}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="statcode" label="保单状态" min-width="100" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="crrcd" label="承保日期" min-width="100" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="instprem" label="保费" min-width="120" show-overflow-tooltip>
                            <template slot-scope="scope">
                                {{scope.row.instprem.toFixed(2)}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="chdrnum" label="核保意见" min-width="120" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <div class="txt-line" v-if="scope.row.show" @click="underwritingOpinion(scope.row.chdrnum)">核保意见</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="chdrnum" label="照会" min-width="120" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <div class="txt-line" v-if="scope.row.show" @click="deliver(scope.row.chdrnum)">照会</div>
                            </template>
                        </el-table-column>


                    </el-table>
                </div>
            </el-col>
        </el-row>

        <!-- 核保意见弹框 -->
        <el-dialog
                title="核保意见"
                :visible.sync="opinionDialogVisible"
                width="60%"
                center>
            <el-table :data="opinionData" @row-click="showBmntdesc">
                <el-table-column property="applnum" label="受理号码" min-width="120" show-overflow-tooltip></el-table-column>
                <el-table-column property="bmntdesc" label="核保意见" min-width="200" show-overflow-tooltip></el-table-column>
                <el-table-column property="effdate" label="日期" min-width="160" show-overflow-tooltip></el-table-column>
                <el-table-column property="userProfile" label="用户" min-width="120" show-overflow-tooltip></el-table-column>
            </el-table>
            <span class="tips" v-if="isShowBmntdesc">点击列表中核保意见可在下方文本域中展示详细核保意见信息：</span>
            <el-input v-model="bmntdesc" v-if="isShowBmntdesc"
                    type="textarea"
                    :rows="2"
            >
            </el-input>
            <el-row>
                <el-col :span="24">
                    <div class="pagination">
                        <el-pagination
                                background
                                v-if='paginations.total > 0'
                                :page-sizes="paginations.pageSizes"
                                :page-size="paginations.pageSize"
                                :layout="paginations.layout"
                                :total="paginations.total"
                                :current-page='paginations.pageIndex'
                                @current-change='handleCurrentChange'
                                @size-change='handleSizeChange'>
                        </el-pagination>
                    </div>
                </el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
            <el-button @click="opinionDialogVisible = false">返 回</el-button>
        </span>
        </el-dialog>

        <!-- 照会 -->
        <el-dialog
                title="照会"
                :visible.sync="opinionDialogVisible1"
                width="60%"
                center>
            <el-table :data="opinionData1" @row-click="showDesc">
                <el-table-column property="clntnum" label="客户姓名" min-width="100" show-overflow-tooltip></el-table-column>
                <el-table-column property="pncode" label="照会代码" min-width="100" show-overflow-tooltip></el-table-column>
                <el-table-column property="procflg" label="处理码" min-width="80" show-overflow-tooltip></el-table-column>
                <el-table-column property="pedesc" label="照会说明" min-width="400" show-overflow-tooltip></el-table-column>
                <el-table-column property="as_pndate" label="照会日期" min-width="120" show-overflow-tooltip></el-table-column>
                <el-table-column property="rprntdate" label="打印日期" min-width="120" show-overflow-tooltip></el-table-column>
                <el-table-column property="as_dateend" label="结案日期" min-width="120" show-overflow-tooltip></el-table-column>
            </el-table>
            <span class="tips" v-if="isShowPedesc">点击列表中照会信息可在下方文本域中展示详细照会说明信息：</span>
            <el-input v-model="pedesc" v-if="isShowPedesc"
                    type="textarea"
                    :rows="2"
            >
            </el-input>
            <el-row>
                <el-col :span="24">
                    <div class="pagination">
                        <el-pagination
                                background
                                v-if='paginations1.total > 0'
                                :page-sizes="paginations1.pageSizes"
                                :page-size="paginations1.pageSize"
                                :layout="paginations1.layout"
                                :total="paginations1.total"
                                :current-page='paginations1.pageIndex'
                                @current-change='handleCurrentChange1'
                                @size-change='handleSizeChange1'>
                        </el-pagination>
                    </div>
                </el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button @click="opinionDialogVisible1 = false">返 回</el-button>
            </span>
        </el-dialog>

    </div>


</template>
<script>
  import constant from '@/utils/constant';
  import {
    showNucleusNoteEuabs,
    showNucleusNoteEubas
  } from "@/api/underwriting/uw";
  import {
    approvalPige,
    billfreqPige,
    mmflgPige,
    cltsexPipe,
    fieldTypePipe,
    cerityPipe,
    cltypePipe,
    risklvlPipe
  } from '@/pipe/comPipe';
  export default {
    name: 'insuranceRecords',
    data() {
      return {
        opinionDialogVisible: false,
        isShowBmntdesc:false,
        isShowPedesc:false,
        opinionData: [],
        opinionData1: [],
        opinionDialogVisible1: false,
        pedesc:"",
        bmntdesc:"",
        paginations: {
          total: 0,        // 总数
          pageIndex: 1,  // 当前位于哪页
          pageSize: 10,   // 1页显示多少条
          pageSizes: [5, 10, 15, 20],  //每页显示多少条
          layout: "total, sizes, prev, pager, next, jumper"   // 翻页属性
        },
        paginations1: {
          total: 0,        // 总数
          pageIndex: 1,  // 当前位于哪页
          pageSize: 10,   // 1页显示多少条
          pageSizes: [5, 10, 15, 20],  //每页显示多少条
          layout: "total, sizes, prev, pager, next, jumper"   // 翻页属性
        },
        chdrnum:"",
        chdrnum1:"",
      }
    },
    props: {
      recordFlag: {
        type: Boolean,
        default: false
      },
      historys:{
        type: Array,
        default(){
          return []
        }
      }
    },
    mounted() {
      console.log(this.recordFlag);
      // this.recordFlag
    },
    methods: {
      showDesc(row, column, event) {
        this.pedesc = row.pedesc;
      },
      showBmntdesc(row, column, event) {
          this.bmntdesc = row.bmntdesc;
      },

      handleCurrentChange(page) {
        this.paginations.pageIndex = page;
        this.underwritingOpinion(this.chdrnum);
      },

      handleSizeChange() {
        this.paginations.pageSize = pageSize;
        this.underwritingOpinion(this.chdrnum);
      },
      // 核保意见
      underwritingOpinion(chdrnum) {
        this.chdrnum = chdrnum;
        console.log('-------')
        let that = this;
        this.opinionDialogVisible = true;
        let params = {
          "pageSize": this.paginations.pageSize,
          "pageNumber": this.paginations.pageIndex,
          "chdrnum": chdrnum
        }
        that.$emit('showLoading',true);
        showNucleusNoteEuabs(params).then(res => {
          that.$emit('showLoading',false);
          if (res.resultCode == constant.SUCCESS && res.data!=null) {
            that.opinionData = res.data.list;
            that.paginations.total = res.data.total
            if(that.opinionData.length>0){
              that.isShowBmntdesc = true;
            }
          }

        }).catch(err => {
          // this.loading = false;
          console.log(err)
        })
      },


      handleCurrentChange1(page) {
        this.paginations1.pageIndex = page;
        this.deliver(this.chdrnum1);
      },

      handleSizeChange1() {
        this.paginations1.pageSize = pageSize;
        this.deliver(this.chdrnum1);
      },
      // 显示照会
      deliver(chdrnum) {
        let that = this;
        this.chdrnum1 = chdrnum;
        this.opinionDialogVisible1 = true;
        let params = {
          "pageSize": this.paginations1.pageSize,
          "pageNumber": this.paginations1.pageIndex,
          "chdrnum": chdrnum
        }
        that.$emit('showLoading',true);
        showNucleusNoteEubas(params).then(res => {
          that.$emit('showLoading',false);
          if (res.resultCode == constant.SUCCESS && res.data!=null) {
            that.opinionData1 = res.data.list;
            that.paginations1.total = res.data.total
            if(this.opinionData1.length>0){
              this.isShowPedesc = true;
            }
          }

        }).catch(err => {
          // this.loading = false;
          console.log(err)
        })
      },

      changeView() {
        this.$emit('subRecordFlag', false);
      }
    },
    filters:{
      approvalPige:function(value){
        return approvalPige(value);
      },
      billfreqPige: function (value) {
        return billfreqPige(value);
      },
    }
  }
</script>
<style lang="less" scoped>
    .underwriting {
        background: #f5f5f5;

        .tips{
            color: #f76565;
            /*margin-top: 10px;*/
            /*display: block;*/
        }
        .underwriting-base {
            position: relative;

            .el-tabs__nav {
                padding: 0 20px;
            }

            .base-title {
                background: #fff;

                .item-title {
                    padding: 20px;

                    .item {
                        margin-bottom: 15px;
                        cursor: pointer;
                    }
                }
            }

            .base-mian {

                border: 1px solid #e1e1e1;
                border-radius: 4px;
                background: #f5f5f5;

                .base-mian-cell {
                    margin-top: 10px;
                    background: #fff;

                    .base-mian-cell-title {
                        padding: 0 20px;
                        height: 50px;
                        line-height: 50px;
                        border-bottom: 1px solid #e1e1e1;

                        .left {
                            .line {
                                color: #f76767;
                            }

                            .tips {
                                margin-left: 15px;
                            }
                        }

                        .right {
                            padding: 0 20px;
                            cursor: pointer;
                        }
                    }

                    .base-mian-cell-main {
                        padding: 20px;
                    }
                }
            }
        }

        .txt-line {
            color: #68A3FC;
            text-decoration: underline;
            cursor: pointer;
        }

        .txt {
            color: #68A3FC;
            cursor: pointer;
        }

        .complain-lab {
            line-height: 28px;
            text-align: right;
            display: block;
            padding-right: 10px;
            box-sizing: border-box;
        }

        .mb10 {
            margin-bottom: 10px;
        }

        .com-title {
            background: #f5f5f5;
            height: 40px;
            line-height: 40px;
            padding: 0 20px;

            .left {
                .line {
                    color: #f76767;
                }

                .tips {
                    margin-left: 15px;
                }
            }
        }

        .check-main {
            padding: 20px 20px 0 20px;
            cursor: pointer;
        }

        .check-info {
            height: 36px;
            padding: 0 20px;
            border: 1px solid #f76565;
            color: #f76565;
            background: #fff;
            cursor: pointer;
        }

        .check-info-def {
            height: 36px;
            padding: 0 20px;
            border: 1px solid #e1e1e1;
            color: #666;
            background: #fff;
            cursor: pointer;
        }

        .edit-main {
            text-align: center;
            margin-top: 15px;
            cursor: pointer;

            button {
                height: 36px;
                padding: 0 30px;
                color: #fff;
                background: #f76565;
                border-radius: 4px;
            }
        }

        .com-txt {
            line-height: 28px;
        }

        .com-txt-line {
            line-height: 28px;
            color: #68A3FC;
            text-decoration: underline;
            cursor: pointer;
        }

        .policy-main {
            margin-top: 10px;
            background: #fff;

            .policy-main-title {
                height: 40px;
                line-height: 40px;
                padding: 0 20px;
                box-sizing: border-box;
                border-bottom: 1px solid #e1e1e1;

                span {
                    margin-left: 8px;
                }
            }

            .policy-main-container {
                padding: 20px;

                .tabs {
                    .tabs-item {
                        div {
                            height: 40px;
                            line-height: 40px;
                            padding: 0 20px;
                            border-radius: 4px 4px 0 0;
                            background: #f2f2f2;
                            text-align: center;
                            cursor: pointer;

                            &.active {
                                background: #f76565;
                                color: #fff;
                            }
                        }
                    }
                }

                .main {
                    padding: 20px;
                    border: 1px solid #e1e1e1;

                    .main-cell {
                        .main-cell-title {
                            height: 50px;
                            line-height: 50px;

                            .line {
                                color: #f76767;
                                margin-right: 8px;
                            }
                        }
                    }
                }
            }
        }

        .com-block {
            padding: 0 10px;
            height: 40px;
            line-height: 40px;
            background: #f5f5f5;

            .com-price {
                color: #FF0000;
            }
        }

        .com-checkbox {
            padding: 0 10px;
            line-height: 36px;
        }

        .com-lab {
            line-height: 36px;
            height: 36px;
            padding: 0 10px;
            text-align: right;
        }

        .com-select {
            height: 36px;
            line-height: 36px;
        }

        .position-re {
            position: relative;
        }

        .position-abs {
            position: absolute;
        }

        .posi-abs-top {
            position: absolute;
            right: 20px;
            top: 10px;

            .lab {
                color: #00C1DE;
                cursor: pointer;
            }
        }

        .position-abs-left {
            position: absolute;
            top: 12px;
            z-index: 10;
            left: 280px;
            color: #68A3FC;
            text-decoration: underline;

            .lab {
                cursor: pointer;
            }
        }

        .position-abs-right {
            position: absolute;
            top: 12px;
            z-index: 10;
            right: 20px;
            color: #68A3FC;
            text-decoration: underline;

            .lab {
                cursor: pointer;
            }
        }

        .pic-select-mian {
            position: relative;
        }

        .select-main {
            width: 50%;
            position: absolute;
            background: #fff;
            border-radius: 4px;
            top: 20%;
            z-index: 1000;
            padding: 20px;
            box-shadow: 0 0 10px #e1e1e1;

            .back-con {
                text-align: center;

                button {
                    height: 30px;
                    padding: 0 20px;
                    background: #fff;
                    border: 1px solid #e1e1e1;
                    border-radius: 4px;
                    cursor: pointer;

                    &:hover {
                        color: #f56c6c;
                        background: #fef0f0;
                        border-color: #fbc4c4;
                    }
                }
            }
        }

        .note-main {
            .note-logo {
                width: 50%;
                margin: 0 auto;
                display: block;
            }

            .tit {
                color: #000;
                font-weight: 600;
            }

            .tip {
                color: #000;
                text-indent: 28px;
                margin-top: 5px;
            }

            .com-note {
                padding: 0 0 0 56px;
                color: #000;

                .com-txt {
                    .lab {

                    }

                    .txt {
                        color: #000;
                        cursor: inherit;
                    }
                }
            }

            .como-title {
                color: #000;
            }

            .com-title-txt {
                color: #000;
                text-indent: 28px;
                margin-top: 5px;
            }

            .com-bom-txt {
                color: #000;
                text-align: right;
                margin-bottom: 5px;

                .sign {
                    display: inline-block;
                    width: 100px;
                    border-bottom: 1px solid #333;
                }

                .si {
                    display: inline-block;
                    width: 35px;
                    border-bottom: 1px solid #333;
                }
            }

            .com-center-tit {
                text-align: center;
                color: #000;
                margin-bottom: 15px;
            }

            .com-center-list {
                li {
                    list-style: circle;
                    color: #000;
                }
            }

            .com-center-bom {
                color: #000;
                margin-top: 10px;
            }

        }
    }
</style>